<template>
    <div class="app-top-nav">
          <div class="w">
              <ul>
                    <!-- <li v-if="this.$router.params">{{this.$router.params.loginName}}</li> -->
                    <template class="yonghu"  v-if="this.$store.state.username">
                            <li><a href="#">{{this.$store.state.username}}</a></li>
                            <li><a href="#" @click="quit()">退出登录</a></li>
                    </template>
                  <li v-else><router-link to="/login">登录/注册</router-link></li>
                  <li><a href="##">我的订单</a></li>
                  <li><a href="##">会员</a></li>
                  <li><a href="##">客户服务</a></li>
                  <li><a href="##">
                      <i class="iconfont icon-shouji"></i>
                      APP</a></li>
              </ul>
          </div>
    </div>
  </template>
  
  <script>
  export default {
        name:'AppTopnav',
        methods: {
            quit(){
                this.$store.commit('quit');
            }
        },
  }
  </script>
  
  <style lang="less" scoped> 
      // 在style中引进less使用
      @import url('../assets/styles/variables.less');
      .app-top-nav{
          background-color:#333333;
           ul{
              //使其显示在一行与之对应的是block
               display: flex;
               line-height: 36px;
               height: 36px;
              //  向尾部浮动
               justify-content: flex-end;
               .yonghu{
                li{
                   a{
                      padding: 0 10px;
                      color:#ccc;
                      border-left: 1px solid #ccc;
                   }
                   a:hover{
                      color: @xtxColor;
                   }
                    }
                    li:nth-child(1){
                  a{
                      border-left: 0;
                  }
               }  
               }
               li{
                   a{
                      padding: 0 10px;
                      color:#ccc;
                      border-left: 1px solid #ccc;
                   }
                   a:hover{
                      color: @xtxColor;
                   }
               }
               li:nth-child(1){
                  a{
                      border-left: 0;
                  }
               }  
           }
               
      }
  </style>